layui.config({
    base: "../../layuiDomain/"
})
layui.use(['test', "table", "forceTable"], function () {
    var myobj = layui.test;
    var table = layui.table;
    var forceTable = layui.forceTable;

    //1、开始验证layui表格之数据--cols - 表头参数一览表
    table.render({
        elem: '#table1'
        , height: 350
        , url: 'http://127.0.0.1:3002/table' //数据接口
        , cols: [[ //表头
            /*
            field: 设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识	
            title: 设定标题名称	
            fixed: 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
                注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面
            width: 设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比请结合实际情况，对不同列做不同设定。
            minWidth：局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth
            sort：  是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
                注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：'贤心' > '2' > '100'，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。
            type: 设定列类型。可选值有：normal（常规列，无需设定）/checkbox（复选框列）/radio（单选框列，layui 2.4.0 新增/）/numbers（序号列）/space（空列
            totalRow： // 开启该列的自动合计功能。默认：false。合计要开启连接合计行区域。如下。连接：https://blog.csdn.net/hangchen1025/article/details/105747182
            totalRowText： 用于显示自定义的合计文本。文字写啥，文字最后呈现在哪一列的下方
            hide： 是否初始隐藏列，默认：false。
            unresize： 是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
            edit: 单元格编辑类型（默认不开启）目前只支持：text（输入框）
            event: 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理。
            style： 自定义单元格样式。即传入 CSS 样式。 实例：background-color: #5FB878; color: #fff;
            align: 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）
            colspan: 单元格所占列数（默认：1）。一般用于多级表头
            rowspan: 单元格所占行数（默认：1）。一般用于多级表头
            templet：自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等。连接； https://www.layui.com/doc/modules/table.html#templet
            toolbar: 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮。连接：https://www.layui.com/doc/modules/table.html#onrowtool 
            LAY_CHECKED： 是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。	
                     如果是在单一个数据中设置LAY_CHECKED：true，则表示只选中到对应的行数，第五个表格有一个对应的实例。
            */
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', rowspan: 2 }
            , { field: 'name', title: '用户名', width: 80, sort: true, rowspan: 2 }
            , { field: 'price', title: '性别', width: 80, sort: true, rowspan: 2 }
            , { field: 'sign', title: '签名', width: 80, rowspan: 2 }
            , { field: 'templet', title: '模板', width: 167, toolbar: '#barDemo', align: "center", rowspan: 2 }
            , { field: 'experience', title: '积分', width: 80, sort: true, rowspan: 2 }
            , { field: 'score', title: '评分', width: 80, sort: true, totalRowText: "合计", event: "myevent", rowspan: 2 }
            , { field: 'age', title: '年龄', width: 80, totalRow: true, rowspan: 2 }
            , { title: '城市', sort: true, unresize: true, style: "color:red;", align: "right", colspan: 3 } // colspan即横跨的单元格数，这种情况下不用设置field和width
            , { field: 'type', title: '类型', width: 80, type: "radio", hide: true }
            , { field: 'templet', title: '模板', width: 80, templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.name}}</a></div>' }
        ], [
            { field: 'province', title: '省', width: 80 }
            , { field: 'city', title: '市', width: 80 }
            , { field: 'county', title: '详细', width: 80 }
        ]]
        , totalRow: true        // 是否开启合计行区域。连接：https://blog.csdn.net/hangchen1025/article/details/105747182
        , done: function (res, curr, count) {
            console.log('data~~~~~~~~~~~~~~~~~~~')
            console.log(this)
            console.log(res)
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);

            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        }
    });
    //监听工具条 
    table.on('tool(table1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        alert("~~")
        console.log('obj', obj)
        console.log('data', data)
        console.log('layEvent', layEvent)
        console.log('tr', tr)
    });


    // 2、基础参数一览表
    table.render({
        elem: '#table2'
        , height: 350
        , url: 'http://127.0.0.1:3002/table' //数据接口
        , cols: [[
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'ridus', title: '选项', width: 80, type: "radio" }
            , { field: 'name', title: '用户名', width: 80, sort: true }
            , { field: 'price', title: '性别', width: 80, sort: true }
            , { field: 'sign', title: '签名', width: 80 }
            , { field: 'experience', title: '积分', width: 80, sort: true }
            , { field: 'score', title: '评分', width: 80, sort: true, totalRowText: "合计", event: "myevent" }
            , { field: 'age', title: '年龄', width: 80, totalRow: true }
            , { field: 'addr', title: '城市', width: 80, sort: true, style: "color:red;", align: "right" }
        ]]

        /*
        url: 异步数据接口相关参数。其中 url 参数为必填项
        toolbar: 开启表格头部工具栏区域，该参数支持四种类型值： 
            toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
            toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
            toolbar: true //仅开启工具栏，不显示左侧模板
            toolbar: 'default' //让工具栏左侧显示默认的内置模板
        defaultToolbar:  该参数可自由配置头部工具栏右侧的图标按钮 。默认值：["filter","exports","print"]
            该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值： 
                filter: 显示筛选图标
                exports: 显示导出图标
                print: 显示打印图标
            可根据值的顺序显示排版图标，如：defaultToolbar: ['filter', 'print', 'exports']
            另外还可以无限扩展图标按钮:
                table.render({ //其它参数在此省略      
                    defaultToolbar: ['filter', 'print', 'exports', {
                        title: '提示' //标题
                        ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                        ,icon: 'layui-icon-tips' //图标类名
                    }]
                });
        width: 设定容器宽度(只能是数字，会自动添加单位px)。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。
        height： 设定容器高度。
            不填写-- 	默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条。
            固定值-- 	设定一个数字，用于定义容器高度，当容器中的内容超出了该高度时，会自动出现纵向滚动条
            full-差值 	高度将始终铺满，无论浏览器尺寸如何。这是一个特定的语法格式，其中 full 是固定的，而 差值 则是一个数值，这需要你来预估，比如：表格容器距离浏览器顶部和底部的距离“和”
        cellMinWidth: （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
        done: 数据渲染完的回调。你可以借此做一些其它的操作
        data: 直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。若是存在远程请求数据是，该字段将不起作用。
        totalRow： 是否开启合计行区域。该字段在表头参数中已经说明了。
        page： 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）
            layui数据表格分页失败()主要错误是表格直接在第一页上就把所有数据显示了,分页不起作用:https://blog.csdn.net/qq_40306697/article/details/106297317
            layui数据表格分页无法正常显示:https://blog.csdn.net/qq_35077107/article/details/101168088
        limit:  每页显示的条数（默认：10）。值务必对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数
        limits: 每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数
        parseData: 将数据进行加工。这里用于将数据加工成分分页能正常显示的数据，因为分页中每一个页都是全部数据，所以要使用到这个字段。
        loading: 是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式
        title: 定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增
        text: 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。
        autoSort： 默认 true，即直接由 table 组件在前端自动处理排序。若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 
        initSort：  初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。 
        id: 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 
                值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。 
        skin: 用于设定表格风格，若使用默认风格不设置该属性即可。值为： 	line （行边框风格）、row （列边框风格） 、nob （无边框风格） 
        even：若不开启隔行背景，不设置该参数即可。值为：true/false
        size： 用于设定表格尺寸，若使用默认尺寸不设置该属性即可。值为：sm （小尺寸） lg （大尺寸） 
        */
        , toolbar: '#barDemo'
        , defaultToolbar: ['exports', 'filter', 'print', {
            title: "新增",
            layEvent: "newAdd",
            icon: "layui-icon-gift"
        }]
        , width: 800
        , cellMinWidth: 80
        , done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);
            //得到当前页码--curr
            console.log(curr);
            //得到数据总量--count
            console.log(count);
            console.log("数据渲染完成了~~")
            console.log(this)
        }
        , data: [
            { id: 11, name: "3dc9ec", price: "12311", age: 11, addr: "3dc9ec", sign: "ch_3dc9ec", experience: "qq3dc9ec", score: 11 },
        ]
        , page: true
        , limit: 10
        , limits: [3, 5, 7, 9, 11]
        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
            var result;
            console.log(this);
            console.log(JSON.stringify(res));
            if (this.page.curr) {
                result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
            }
            else {
                result = res.data.slice(0, this.limit);
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": result //解析数据列表
            };
        }
        , title: "2、基础参数一览表"
        , text: {
            none: "数据正在加载中，请等待~~~~" //默认：无数据。注：该属性为 layui 2.2.5 开始新增
        }
        , initSort: {
            field: 'id' //排序字段，对应 cols 设定的各字段名
            , type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
        }
        , skin: 'line' //行边框风格
        , even: true //开启隔行背景
        , size: 'sm' //小尺寸的表格
    });
    table.on('toolbar(table2)', function (obj) { //注：toolbar 是监听头部工具栏事件--------------------------------，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        alert("~222~")
        console.log('obj', obj)
        console.log('data', data)
        console.log('layEvent', layEvent)
        console.log('tr', tr)
    });


    // 3、基础方法
    table.render({
        elem: '#table3'
        , height: 350
        // , url: 'http://127.0.0.1:3002/table' //数据接口
        , cols: [[
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'ridus', title: '选项', width: 80, type: "radio" }
            , { field: 'name', title: '用户名', width: 200, sort: true }
            , { field: 'checkbox', title: '选项', width: 80, type: "checkbox" }
        ]]

        /*
        
        */
        , toolbar: '#barDemo3'
        , defaultToolbar: ['exports', 'filter', 'print']
        , data: [
            { id: 1, name: "lisi" },
            { id: 2, name: "张三十年" },
            { id: 3, name: "世界美好" },
        ]
    });
    table.on('toolbar(table3)', function (obj) { //注：toolbar 是监听头部工具栏事件--------------------------------，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (obj.event) {
            case "detail":
                detail()
                break;
            case "resize":
                resize()
                break;
            case "reload":
                reload()
                break;
            case "getData":
                getData()
                break;

        }
    });
    // 获取选中行的数据
    function detail() {
        var checkStatus = table.checkStatus("table3")
        console.log('data~~', checkStatus)
        console.log(checkStatus.data) //获取选中行的数据
        console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        console.log(checkStatus.isAll) //表格是否全选
    }
    // 重置表格尺寸，不过一般都是放在·
    function resize() {
        // 重置表格尺寸，不过一般都是放在事件方法中，特别是浏览器的界面大小改变就执行的方法中
        var resize = table.resize("table3")
        console.log('data~~', resize)
    }
    // 表格重载--重新加载数据
    function reload() {
        var reload = table.reload("table3", {
            data: [
                { id: 1, name: "lisi~~~" },
                { id: 2, name: "张三十年~~~" },
                { id: 3, name: "世界美好~~~" }
            ]
        })
        console.log('data~~', reload)
    }
    //  获取表格的全部数据
    function getData() {
        var getData = table.cache['table3']
        console.log('data~~', getData)
    }


    // 4、表格列拖拽
    var myTable = {
        elem: '#table4'
        , height: 350
        // , url: 'http://127.0.0.1:3002/table' //数据接口
        , cols: [[
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'ridus', title: '选项', width: 80, type: "radio" }
            , { field: 'name', title: '用户名', width: 200, sort: true }
            , { field: 'checkbox', title: '选项', width: 80, type: "checkbox" }
        ]]
        , defaultToolbar: ['exports', 'filter', 'print']
        , data: [
            { id: 1, name: "lisi" },
            { id: 2, name: "张三十年" },
            { id: 3, name: "世界美好" },
        ]
        , done: function () {
            forceTable.render(this)
        }
    }
    // forceTable.render(myTable)


    // 5、事件，直接看源码
    table.render({
        elem: '#table5'
        , height: 350
        , cols: [[
            { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'ridus', title: '选项', width: 80, type: "radio" }
            , { field: 'name', title: '用户名', width: 200, sort: true }
            , { field: 'checkbox', title: '选项', width: 80, type: "checkbox" }
        ]]
        , toolbar: '#barDemo5'
        , defaultToolbar: ['exports', 'filter', 'print']
        , data: [
            { id: 1, name: "lisi" },
            { id: 2, name: "张三十年" },
            { id: 3, name: "世界美好" },
        ]
    })
    // 手动选择行与取消行
    var flag = false;
    table.on('toolbar(table5)', function (obj) {
        console.log('obj', obj)
        // 获取表格的数据
        var data = table.cache['table5']
        console.log('tableObj~~', data)
        if (!flag) {
            data.forEach(function (item) {
                if (item.id === 2) {
                    console.log('item')
                    item.LAY_CHECKED = true
                    flag = true;
                }
            })
        } else {
            data.forEach(function (item) {
                if (item.id === 2) {
                    console.log('item')
                    item.LAY_CHECKED = false
                    flag = false;
                }
            })
        }
        // 重载数据，让选择中的显示出来
        table.reload("table5", { data: data })
    });
    // 监听行中工具条点击事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        console.log('obj', obj)
    });
    // 监听头部工具栏事件
    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        console.log('obj', obj)
    });
    // 监听复选框选择
    table.on('checkbox(test)', function (obj) {
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });
    // 监听单元格编辑
    table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
        console.log(obj.value); //得到修改后的值
        console.log(obj.field); //当前编辑的字段名
        console.log(obj.data); //所在行的所有相关数据  
    });
    //监听行单击事件
    table.on('row(test)', function (obj) {
        console.log(obj.tr) //得到当前行元素对象
        console.log(obj.data) //得到当前行数据
        //obj.del(); //删除当前行
        //obj.update(fields) //修改当前行数据
    });
    //监听行双击事件
    table.on('rowDouble(test)', function (obj) {
        //obj 同上
    });
    // 监听排序切换
    table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('idTest', {
            initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                field: obj.field //排序字段
                , order: obj.type //排序方式
            }
        });
    });
})
